<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<title>EdgeToEdgeStoreList sorted</title>

	<script src="../../../deviceTheme.js" data-dojo-config="mblThemeFiles: ['base']"></script>
	<script src="../../../../../dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: false"></script>
	<script>
	require([
		"dojo/dom",
		"dijit/registry",  // dijit.byId
		"doh/runner",
		"dojox/mobile/EdgeToEdgeStoreList",
		"dojo/store/Observable",
		"dojo/store/Memory",
		"dojox/mobile/parser",		// This mobile app uses declarative programming with fast mobile parser
		"dojox/mobile",				// This is a mobile app.
		"dojox/mobile/View",		// This mobile app uses mobile view
		"dojox/mobile/compat",		// This mobile app supports running on desktop browsers
		"dojo/domReady!"
	], function(dom, registry, runner, EdgeToEdgeStoreList, Observable, Memory, parser){
			var storeData = [{label:"A item", rightText: "A"},
                              {label:"Z item", rightText: "Z"},
                              {label:"B item", rightText: "B"},
                              {label:"Y item", rightText: "Y"},
                              {label:"C item", rightText: "C"},
                              {label:"X item", rightText: "X"},
                              {label:"D item", rightText: "D"},
                              {label:"W item", rightText: "W"},
                              {label:"E item", rightText: "E"},
                              {label:"V item", rightText: "V"},
                              {label:"F item", rightText: "F"},
                              {label:"U item", rightText: "U"},
                              {label:"G item", rightText: "G"},
                              {label:"T item", rightText: "T"},
                              {label:"H item", rightText: "H"},
                              {label:"S item", rightText: "S"},
                              {label:"I item", rightText: "I"},
                              {label:"R item", rightText: "R"},
                              {label:"J item", rightText: "J"},
                              {label:"Q item", rightText: "Q"},
                              {label:"K item", rightText: "K"},
                              {label:"P item", rightText: "P"},
                              {label:"L item", rightText: "L"},
                              {label:"O item", rightText: "O"},
                              {label:"M item", rightText: "M"},
                              {label:"N item", rightText: "N"}];
			var store = Observable(new Memory({data: storeData, idProperty: "label"}));
			var updateItemRightText = function(itemLabel, newRightText) {
				var item = store.get(itemLabel);
				if(item){
					item.rightText = newRightText;
					store.put(item);
				}else{
					alert("Cannot find item labelled " + itemLabel);
				}
			}
			parser.parse();
			var view = registry.byId("view1");
			var demoWidget = new EdgeToEdgeStoreList({id:"list", store:store, query:{}, queryOptions:{sort:[{attribute:"rightText"}]}});
			demoWidget.placeAt(view.containerNode);
			demoWidget.startup();
			dom.byId("updateButton").onclick = function () {
				updateItemRightText(dom.byId("labelInput").value, dom.byId("rightTextInput").value);
			};
			
			runner.register("EdgeToEdgeList sorted", [
				{
					name: "Check that #17622 is solved",
					timeout: 4000,
					runTest: function () {
						var list = registry.byId("list");
						runner.assertEqual(26, list.domNode.children.length, "The number of list items is not the expected one");
						runner.assertEqual("A", list.domNode.children[0].children[0].innerHTML, "First item right text is not the expected one");
						runner.assertEqual("A item", list.domNode.children[0].children[1].innerHTML, "First item label is not the expected one");
						runner.assertEqual("Z", list.domNode.children[25].children[0].innerHTML, "Last item right text is not the expected one");
						runner.assertEqual("Z item", list.domNode.children[25].children[1].innerHTML, "Last item label is not the expected one");
						dom.byId("labelInput").value = "Z item";
						dom.byId("rightTextInput").value = "A";
						dom.byId("updateButton").onclick();
						runner.assertEqual(26, list.domNode.children.length, "The number of list items is not the expected one after first update");
						runner.assertEqual("A", list.domNode.children[0].children[0].innerHTML, "First item right text is not the expected one after first update");
						runner.assertEqual("A item", list.domNode.children[0].children[1].innerHTML, "First item label is not the expected one after first update");
						runner.assertEqual("A", list.domNode.children[1].children[0].innerHTML, "Second item right text is not the expected one after first update");
						runner.assertEqual("Z item", list.domNode.children[1].children[1].innerHTML, "Second item label is not the expected one after first update");
						runner.assertEqual("Y", list.domNode.children[25].children[0].innerHTML, "Last item right text is not the expected one after first update");
						runner.assertEqual("Y item", list.domNode.children[25].children[1].innerHTML, "Last item label is not the expected one after first update");
						dom.byId("labelInput").value = "Z item";
						dom.byId("rightTextInput").value = "Z";
						dom.byId("updateButton").onclick();
						runner.assertEqual(26, list.domNode.children.length, "The number of list items is not the expected one after second update");
						runner.assertEqual("A", list.domNode.children[0].children[0].innerHTML, "First item right text is not the expected one after second update");
						runner.assertEqual("A item", list.domNode.children[0].children[1].innerHTML, "First item label is not the expected one after second update");
						runner.assertEqual("Z", list.domNode.children[25].children[0].innerHTML, "Last item right text is not the expected one after second update");
						runner.assertEqual("Z item", list.domNode.children[25].children[1].innerHTML, "Last item label is not the expected one after second update");
					}
				}
			]);
			runner.run();
		});
</script>
</head>
<body style="visibility:hidden;">
	<div id="view1" data-dojo-type="dojox/mobile/View">
		<h1>List sorted by items right text.</h1>
		<label for="labelInput">Label:</label>
		<input id="labelInput" type="text">
		<label for="rightTextInput">New right text:</label>
		<input id="rightTextInput" type="text">
		<input id="updateButton" type="button" value="update">
		<p>
	</div>
</body>
</html>
